<template>
    <div class="dialog-alert">
        <el-dialog v-model="isShowDialog" :title="dialogAlertTitle" width="30%" align-center :show-close="isShowClose" 
            :class="{large: alertSize == 'large'}" :close-on-click-modal="false" @close="onCancel()">
            <span>
                <slot></slot>
                {{ message }}
            </span>
            <template #footer>
            <span class="dialog-footer">
                <el-button v-if="isShowCancleBtn" @click="onCancel()">{{ cancleTitle }}</el-button>
                <el-button v-if="isShowConfirmBtn" @click="onConfirm()" class="confirm-btn">{{ confirmTitle }}</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue'

const props = defineProps({
    data: {
        type: Object,
        default: function() {
            return {
                title: '提示',
                message: '',
                isShowConfirmBtn: true,
                confirmTitle: '确认',
                isShowCancleBtn: false,
                cancleTitle: '取消',
                isShowClose: true,
                flag: null,
                size: ''
            }
        }
    }
    
})

const { data } = toRefs(props)
const isShowDialog = ref<boolean>(true)

let dialogAlertTitle = ref<string>('')
let message = ref<string>('')
let isShowConfirmBtn = ref<boolean>(true)
let confirmTitle = ref<string>('')
let isShowCancleBtn = ref<boolean>(false)
let cancleTitle = ref<string>('')
let isShowClose = ref<boolean>(true)
let alertSize = ref<string>('')
const initData = () => { 
    dialogAlertTitle.value = data.value.title ? data.value.title : '提示'
    message.value = data.value.message ? data.value.message : ''
    isShowConfirmBtn.value = data.value.isShowConfirmBtn ? false : true
    confirmTitle.value = data.value.confirmTitle ? data.value.confirmTitle : '确认'
    isShowCancleBtn.value = data.value.isShowCancleBtn ? true : false
    cancleTitle.value = data.value.cancleTitle ? data.value.cancleTitle : '取消'
    isShowClose.value = data.value.isShowClose ? true : false
    alertSize.value = data.value.size ? data.value.size : 'normal'
}

// 点击按钮
const emits = defineEmits(['on-close', 'on-confirm'])
const onCancel = () => {
    emits('on-close', data.value && data.value.flag)
}
const onConfirm = () => {
    emits('on-confirm', data.value && data.value.flag)
}
watch(() => data.value, () => {
    initData()
}, { deep: true })

onMounted(() => {
    initData()
})
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    border-radius: 0.4rem;

    .el-dialog__header {
        padding: 0.5rem 1rem 0.2rem !important;
        border-bottom: 1px solid var(--border-color);
        margin-right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-dialog__headerbtn {
            position: unset;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            width: auto;
            height: auto;
        }
    }
    .el-dialog__title {
        font-size: 16px;
        color: var(--alert-font-color);
    }

    .el-dialog__body {
        padding: 1rem 1rem;
        span {
            color: var(--alert-font-color);
        }
    }

    .el-dialog__footer {
        padding-top: 0;
        padding-bottom: 0.5rem;

        .el-button {
            border-radius: 1rem;
            min-width: 5rem;
        }

        .confirm-btn {
            background-color: #23366F;
            span {
                color: #ffffff;
            }
        }
    }
}
:deep(.el-dialog.large ){
    --el-dialog-width: 60% !important;
}

</style>